<template>
	<view class="">
		<view class="cluestop">
			<view class="top1" @click="sortClick">
				<view :class="sortc?'colorblue':''">排序</view>
				<image src="/static/sort.jpg"></image>
			</view>
			<view class="top1" @click="chanceClick">
				<view :class="chancec?'colorblue':''" >筛选</view>
				<image src="../../static/shuaixuan.jpg"></image>
			</view>
		</view>
		<template v-if="iscurrent === 1">
			<cluesSort @closetemp="closetemp"></cluesSort>
		</template>
		<template v-if="iscurrent === 2">
			<screensx @closetemp="sxclosetemp"></screensx>
		</template>
		<!--  -->
		<template v-if="iscurrent !== 2 && iscurrent !== 1">
			<view class="mainone">
				<indexmain :shuju="item" v-for="(item, index) in shuju" @gotomore="tomore"></indexmain>

				<view class="lodingbot">
					<u-loading mode="flower"></u-loading>
					<text>正在加载</text>
				</view>
			</view>
		</template>
		<!--  -->
	</view>
</template>

<script>
import cluesSort from '../../components/cluesSort.vue';
import screensx from '../../components/screensx.vue';
import indexmain from '../../components/indexmain.vue';
export default {
	data() {
		return {
			sortc:false,  //排序按钮变色
			chancec:false, //筛选按钮变色
			current: '',
			iscurrent: 3,
			show: false,

			monishuju: [
				{
					title:'商机标题',
					relevancy:'深圳木卫二科技有限公司',
					charge:'李小红100',
					money:'￥100000',
					range:'初步洽谈',
					odds:'100%',
					days:100,
					source:'电话营销',
					addtime:'2019-03-15',
					remark:'',
				},
				{
					title:'商机标题1',
					relevancy:'深圳木卫二科技有限公司',
					charge:'李小红10',
					money:'￥100000',
					range:'初步洽谈',
					odds:'10%',
					days:10,
					source:'电话营销',
					addtime:'2019-03-15',
					remark:'',
				},
				{
					title:'商机标题2',
					relevancy:'深圳木卫二科技有限公司',
					charge:'李小红20',
					money:'￥100000',
					range:'初步洽谈',
					odds:'20%',
					days:20,
					source:'电话营销',
					addtime:'2019-03-15',
					remark:'',
				},
				{
					title:'商机标题3',
					relevancy:'深圳木卫二科技有限公司',
					charge:'李小红3',
					money:'￥100000',
					range:'初步洽谈',
					odds:'1%',
					days:2,
					source:'电话营销',
					addtime:'2019-03-15',
					remark:'',
				}
			],
			shuju: [],
			sortrule: [],
			sortsshuju: []
		};
	},
	components: {
		cluesSort,
		screensx,
		indexmain
	},
	onLoad() {
		/* console.log('1111111'); */
		uni.setStorageSync('moni', this.monishuju);

		this.shuju = uni.getStorageSync('moni');
	},
	/* 	onShow(){
		console.log('show');
	},
	onReady(){
		console.log('ready');
	},
	onHide(){
		console.log('hide');
	}, */
	/* onReachBottom(){}, */
	onNavigationBarButtonTap(val) {
		if (val.index === 1) {
			uni.navigateTo({
				url: '/pages/index/newClues'
			});
		}
		if (val.index === 0) {
			uni.navigateBack({
				url: '/pages/index/index'
			});
		}
	},
	methods: {
		//排序按钮点击
		sortClick() {
			this.iscurrent = 1;
			this.sortc=!this.sortc;
			this.chancec=false;
			/* console.log(this.iscurrent); */
		},
		//筛选按钮点击
		chanceClick() {
			this.iscurrent = 2;
			this.chancec=!this.chancec;
			this.sortc=false;
			/* console.log(this.iscurrent); */
		},

		tomore() {
			uni.navigateTo({
				url: '/pages/index/customers'
			});
		},
		//排序
		closetemp(sortrule1) {
			if(!sortrule1){
				this.shuju = uni.getStorageSync('moni');
			}
			console.log(sortrule1);
			this.iscurrent = 3;
			this.sortrule = sortrule1;
			this.chancesorts(this.sortrule);
		},
		//筛选
		sxclosetemp(sx){
			if(!sx){
				this.shuju = uni.getStorageSync('moni');
			}
			console.log(sx);
			this.iscurrent = 3;
			
		},
		//排序
		chancesorts(rules) {
			if (rules[0] === 0 && rules[1] === 0) {
				this.clicksortss('成交几率');
			}
			if (rules[0] === 1 && rules[1] === 0) {
				this.clicksortss('反成交几率');
			}
			if (rules[0] === 0 && rules[1] === 1) {
				this.clicksortss('报价总金额');
			}
			if (rules[0] === 1 && rules[1] === 1) {
				this.clicksortss('反报价总金额');
			}
			/* 手机号码 */
			if (rules[0] === 0 && rules[1] ===2) {
				this.clicksortss('产品制作天数');
			}
			if (rules[0] === 1 && rules[1] === 2) {
				this.clicksortss('反产品制作天数');
			}
	
		},

		/* paixi */
		clicksortss(num) {
		 	if (num === '成交几率') {
				let b = {};
				for (var i = 0; i < this.shuju.length; i++) {
					for (var j = 0; j < this.shuju.length - 1; j++) {
						if (parseInt(this.shuju[j].odds)>parseInt(this.shuju[j+1].odds)) {
							b = this.shuju[j];
							this.shuju[j] = this.shuju[j + 1];
							this.shuju[j + 1] = b;
						}
					}
				}
			}
			if (num === '反成交几率') {
				this.clicksortss('成交几率');
				this.shuju.reverse();
			}
			if (num === '报价总金额') {
				let b = {};
				for (var i = 0; i < this.shuju.length; i++) {
					for (var j = 0; j < this.shuju.length - 1; j++) {
						if (parseInt(this.shuju[j].money)>parseInt(this.shuju[j+1].money)) {
							b = this.shuju[j];
							this.shuju[j] = this.shuju[j + 1];
							this.shuju[j + 1] = b;
						}
					}
				}
			}
			if (num === '反报价总金额') {
				this.clicksortss('报价总金额');
				this.shuju.reverse();
			}
			if (num === '产品制作天数') {
				let b = {};
				for (var i = 0; i < this.shuju.length; i++) {
					for (var j = 0; j < this.shuju.length - 1; j++) {
						if (parseInt(this.shuju[j].days)>parseInt(this.shuju[j+1].days)) {
							b = this.shuju[j];
							this.shuju[j] = this.shuju[j + 1];
							this.shuju[j + 1] = b;
						}
					}
				}
			}
			if (num === '反产品制作天数') {
				this.clicksortss('产品制作天数');
				this.shuju.reverse();
			}

			/* 未跟进时间天数 */
			// if (num === '未跟进时间天数 ') {
			// 	let b = {};
			// 	for (var i = 0; i < this.shuju.length; i++) {
			// 		for (var j = 0; j < this.shuju.length - 1; j++) {
			// 			if (this.arrSortMinToMax(this.shuju[j].nofollow, this.shuju[j + 1].nofollow) > 0) {
			// 				b = this.shuju[j];
			// 				this.shuju[j] = this.shuju[j + 1];
			// 				this.shuju[j + 1] = b;
			// 			}
			// 		}
			// 	}
			// }
			// if (num === '反未跟进时间天数 ') {
			// 	this.clicksortss('未跟进时间天数');
			// 	this.shuju.reverse();
			// }
		},

		/*  */
		arrSortMinToMax(a, b) {
			/* console.log(a, b); */
			if (/^\d+/.test(a) && /^\d+/.test(b)) {
				// 提取起始数字, 然后比较返回
				return /^\d+/.exec(a) - /^\d+/.exec(b);
				// 如包含中文, 按照中文拼音排序
			} else if (this.isChinese(a) && this.isChinese(b)) {
				// 按照中文拼音, 比较字符串
				return a.localeCompare(b, 'zh-CN');
			} else {
				// 排序数字和字母
				return a.localeCompare(b, 'en');
			}
		},
		isChinese(str) {
			// 中文万国码正则
			if (
				/[\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d]/.test(
					str
				)
			) {
				console.log('111');
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.cluestop {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	background-color: #ffffff;
	position: sticky;
	top: var(--window-top);
	z-index: 999;
	.top1 {
		display: flex;
		padding-bottom: 16rpx;

		image {
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin-top: 4rpx;
		}
		.colorblue{
			color:#0079FE ;
		}
	}
}
.indexbo {
	display: flex;
	.indbu {
		width: 50%;
		height: 100rpx;
		box-sizing: border-box;
		border: 1rpx solid #eee;
		text-align: center;
		line-height: 100rpx;
		color: #1678ff;
	}
	.active1 {
		color: #ffffff;
		background-color: #1678ff;
	}
}
.lodingbot {
	display: flex;
	width: 750rpx;
	height: 200rpx;
	justify-content: center;
	padding-top: 80rpx;
	background-color: #eee;
}
.mainone {
	background-color: #f7f7f7;
	padding: 36rpx 20rpx;
}
</style>
